<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蓉车宝</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/home.css" />
    <!-- <link rel="stylesheet" type="text/css" href="css/shoppingCar.css"> -->
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="script/home_ban.js"></script>
    <script type="text/javascript" src="script/eg_top_search.js"></script>
    <script type="text/javascript" src="script/snncar.js"></script>
    <script type="text/javascript" src="script/jquery.SuperSlide.2.1.1.js"></script>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script type="text/javascript" src="plugin/vue/dist/vue.js"></script>
    <script type="text/javascript" src="plugin/axios/dist/axios.js"></script>
    <script type="text/javascript" src="script/common.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!--导航登陆网页版下拉-->
    <script type="text/javascript">
        $(function () {
            var setTime;
            $(".egc-top .nav-cent .operate").hover(function () {
                var _this = $(this);
                setTime = setTimeout(function () {
                    _this.find(".sec-version").slideDown(200);
                    _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
                }, 200);
            }, function () {
                if (setTime) {
                    clearTimeout(setTime);
                }
                $(".egc-top .nav-cent .sec-version").slideUp(200);
                $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
            });
        });
    </script>

    <!--下拉导航关闭-->
    <script type="text/javascript">
        $(function () {
            $('.menu-mb i').click(function () {
                $(".navigation-mb-list").slideDown(300);
            });
            $('.navigation-mb-list .list-close-btn').click(function () {
                $(".navigation-mb-list").slideUp(300);
            });
        });
    </script>

    <script type="text/javascript">
        $(function () {
            var scroll_heitht = $('body').offset().top;
            var isShow = true;
            $(window).scroll(function () {
                if ($(window).scrollTop() > scroll_heitht && isShow) {
                    $('.stress-search-box').slideDown(200);
                } else {
                    $('.stress-search-box').slideUp(200);
                }
            });
            $('.stress-close a').click(function () {
                isShow = false;
                $('.stress-search-box').slideUp(200).unbind(window, aa);
            });
        });
    </script>
</head>

<body>
    <div id="root">
        <div class="egc-top">
            <div class="nav-cent">
                <div class="top-r">
                    <span id="noLogin">
                        <a href="javascript:void(0)" id="b-regist">注册</a>
                        |
                        <a href="#" id="b-login" class="b-login">登陆</a>
                        |
                        <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx03bd86056bd3fc0e&redirect_uri=http://wx.rongcarservice.com/callback.html&response_type=code&scope=snsapi_login&state=123456#wechat_redirect"
                            id="b-wx-login">微信登陆</a>
                        |
                        <a href="/cartlist.html">购物车</a>
                    </span>
                    <span id="userHeaderInfo" style="display: none;">
                        欢迎您!{{username}}
                        <a href="#" id="b-logout" class="b-login" @click="logout">登出</a>
                    </span>
                </div>
                <div class="top-l">全国统一客服热线：XXX</div>
                <div class="clear_fix"></div>
            </div>
        </div>
        <!-- <div class="w">
            <div class="cart-filter-bar" style="color: red;font-weight: bold;font-size: 16px;">
                <ul class="switch-cart">
                    <li class="switch-cart-item">
                        <a href="#none" style="color: red;"><em>全部商品</em>
                            <span class="number" style="margin-left: 10px;">5</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="clr"></div>
            <div class="cart-thead">
                <div class="column t-checkbox">
                    <div class="cart-checkbox">
                        <input type="checkbox" name="select-all" class="jdcheckbox"
                            clstag="pageclick|keycount|Shopcart_CheckAll|0">
                    </div>
                    全选
                </div>
                <div class="column t-goods">商品</div>
                <div class="column t-props">&nbsp;</div>
                <div class="column t-price">单价</div>
                <div class="column t-quantity">数量</div>
                <div class="column t-sum">小计</div>
                <div class="column t-action">操作</div>
            </div>
            <div class="cart-tbody">
                <div class="shop">
                    <div class="cart-checkbox">
                        <input type="checkbox" name="checkShop" class="jdcheckbox"
                            clstag="pageclick|keycount|Shopcart_CheckShop|1_10907465" checked="">
                    </div>
                    <span class="shop-txt">
                        <a href="//mall.jd.com/index-10662258.html" class="shop-name" target="_blank" rel="noreferrer"
                            data-vendorid="10907465" clstag="pageclick|keycount|Shopcart_Shopid|10907465">
                            <i class="vendor-icon undefined" title="">
                            </i>宝马旗舰店
                        </a>
                        <i class="ml5 btn-im"></i>
                    </span>
                </div>
                <div class="item-list">
                    <div class="item-combine">
                        <div class="item-item item-seleted" id="10033665972623" data-sku="10033665972623"
                            data-ts="1681211004188" data-skuuuid="F1yA4r1202690684881702912">
                            <div class="item-form">
                                <div class="cell p-checkbox">
                                    <div class="cart-checkbox">
                                        <input type="checkbox" name="checkItem" class="jdcheckbox"
                                            clstag="pageclick|keycount|Shopcart_CheckProd|1_10033665972623" checked="">
                                        <span class="line-circle"></span>
                                    </div>
                                </div>
                                <div class="cell p-goods">
                                    <div class="goods-item">
                                        <div class="p-img ">
                                            <a href="http://115.159.217.249:8888/group1/M00/00/01/rBEAA2MZrEaAfCaBAAHt5Ab1hek479.jpg"
                                                target="_blank" rel="noreferrer" title="宝马2020 x3贱卖">
                                                <img style="width: 80px;height: 80px;"
                                                    src="http://115.159.217.249:8888/group1/M00/00/01/rBEAA2MZrEaAfCaBAAHt5Ab1hek479.jpg"
                                                    alt="宝马2020 x3贱卖">
                                            </a>
                                        </div>
                                        <div class="p-msg">
                                            <div class="p-name">
                                                <a href="" target="_blank" rel="noreferrer" title="宝马2020 x3贱卖"
                                                    clstag="pageclick|keycount|Shopcart_Productid|10033665972623_9">
                                                    <i class="product-icon " title=""></i>
                                                    宝马2020 x3贱卖
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cell p-props">
                                    <div class="props-txt"><span class="">宝马2020 x3贱卖</span></div>
                                </div>
                                <div class="cell p-price">
                                    <span class="p-price-cont">￥6.15</span>
                                </div>
                                <div class="cell p-quantity" style="margin-left:63px;">
                                    <div class="cart-number quantity ">
                                        <button disabled="" class="cart-number-dec is-disabled">
                                            <i class="cart-icon-subt">-</i>
                                        </button>
                                        <div class="cart-input">
                                            <input class="cart-input-o" min="1" max="3" value="1">
                                        </div>
                                        <button class="cart-number-inc">
                                            <i class="cart-icon-add">+</i>
                                        </button>
                                    </div>
                                </div>
                                <div class="cell p-sum"><strong>¥6.15</strong></div>
                                <div class="cell p-ops" style="margin-left: 34px;">
                                    <a href="#none" class="p-ops-item"
                                        clstag="pageclick|keycount|Shopcart_Delete|10033665972623">删除</a>
                                </div>
                            </div>
                            <div class="product-extra mb10"></div>
                            <div class="item-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <div style="padding-bottom: 52px;"></div>
                    <div class="cart-floatbar cart-floatbar-fixed"
                        style="position: fixed; transform: translateZ(0px); top: auto; bottom: 0px;">
                        <div class="cart-floatbar">
                            <div class="cart-toolbar">
                                <div class="toolbar-wrap"><input type="hidden" id="checkedCartState" value="1">
                                    <div class="selected-item-list hide" style="display: none;"></div>
                                    <div class="options-box">
                                        <div class="left">
                                            <div class="select-all"><input type="checkbox" class="jdcheckbox"
                                                    clstag="pageclick|keycount|Shopcart_CheckAll|0">全选
                                            </div>
                                            <div class="operation"><a href="#none" class="opt-batch-remove">删除选中的商品</a>
                                                <a href="#none" class="opt-batch-follow">移入关注</a>
                                                <a href="#none" class="opt-cleaner" title="亲，点我可快速清空购物车商品哦！">
                                                    <strong>清空购物车</strong>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <div class="combine">
                                                <div class="btn-area"><a class="common-submit-btn" href="#none"
                                                        clstag="pageclick|keycount|Shopcart_Pay|0">去结算<b></b></a>
                                                </div>
                                                <div class="price-sum">
                                                    <div>
                                                        <div class="price-sum-amount">
                                                            <div class="price-show"><span class="txt">总价：</span><span
                                                                    class="price priceShow"><em>￥6.15</em></span><b
                                                                    class="ml5 price-tips"></b>
                                                                <div class="price-tipsbox-new">
                                                                    <div class="ui-tips-main">不含运费及送装服务费</div>
                                                                    <span class="price-tipsbox-arrow"></span>
                                                                </div>
                                                            </div>
                                                            <span class="amount-sum">已选择<em>1</em>件商品<b
                                                                    class="up"></b></span>
                                                        </div>
                                                        <div class="price-sum-extra"></div>
                                                    </div>
                                                </div>
                                                <div class="clr"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clr"></div>
        </div> -->
        <div class="outer">
            <div class="cart-thead">
                <div class="column t-checkbox">
                    <div class="cart-checkbox">
                        <!-- <input type="radio" value="true" >&nbsp;全选</input>  -->
                        <el-checkbox v-model="allChecked" @change="isAllSelect()" /> &nbsp;全选
                    </div>
                </div>
                <div class="column t-goods">商品</div>
                <div class="column t-props">&nbsp;</div>
                <div class="column t-price">单价</div>
                <div class="column t-quantity">数量</div>
                <div class="column t-sum">小计</div>
                <div class="column t-action">操作</div>
            </div>
            <div class="cart-tbody" v-for="(item,index) in cartMap" :key="index">
                <div class="shop">
                    <div class="cart-checkbox">
                        <el-checkbox  /> &nbsp;
                    </div>
                    <span class="shop-txt">
                        <span class="shop-name">{{JSON.parse(index).name}} </span>
                    </span>
                </div>
                <div class="item-list" v-for="(cart,index) in item" :key="index">
                    <div class="item-form">
                        <div class="p-checkbox" style="margin-left: 11px;">
                            <el-checkbox v-model="cart.isSelect == 1" @change="changeSelect(cart.id,cart.isSelect)" /> &nbsp;
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img :src="cart.img" alt="商品图片">
                            </div>
                            <div class="p-msg">
                                <div class="p-name">
                                    {{cart.spuName}}
                                </div>
                                <div class="p-props">
                                    {{cart.skuInfo}}
                                </div>
                            </div>
                        </div>
                        <div class="p-price">
                            ￥{{cart.price}}
                        </div>
                        <div class="p-num">
                            <el-input-number v-model="cart.num" controls-position="right" @change="changeNum(cart)" :min="1" :max="10" size="mini"></el-input-number>
                        </div>
                        <div class="p-totals-price">
                            ￥{{cart.price*cart.num}}
                        </div>
                        <div class="p-oper">
                            <span @click="deleteById(cart.id)">删除</span>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="options-box">
                <div class="left">
                    <el-checkbox v-model="allChecked" @change="isAllSelect()" style="margin-left: 11px;"/> &nbsp;全选
                    <span class="deleteSelectGoods">删除选择的商品</span>
                </div>
                <div class="right">
                    <div class="settleM">
                        <span @click="toSettle">去结算</span>
                    </div>
                    <div class="text">
                        已选择<span style="color:red">{{selectNum}}</span>件商品 &nbsp;
                        总价：<span style="color:rgb(226, 35, 26);font-size:17px;font-weight: 700;">￥{{totalPrices}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            username: "",
            cartMap:null,
            allChecked:false,
            selectNum:0,
            totalPrices:0,
            userId:null
        },
        methods: {
            logout() {
                localStorage.removeItem("token")
                localStorage.removeItem("loginUser")
                $('#userHeaderInfo').hide()
                $("#noLogin").show()
                location.href("/index.html")
            },
            changeSelect(id,isSelect){
                let select = 1;
                if(isSelect == 1){
                    select = 0
                }
                this.$http.get("/cart/updateIsSelect/"+id+"/"+select)
                    .then(res => {
                        if(res.data.code == 200){
                            this.getUserCartList(this.userId)
                        }
                    })
            },
            toSettle(){

            },
            getUserCartList(userId){
                this.$http.get("/cart/getCartsByUserId/"+userId)
                    .then(res => {
                        this.cartMap = res.data.resultObj
                        var flag = true
                        this.selectNum = 0;
                        this.totalPrices = 0;
                        for (const key in this.cartMap) {
                            if (Object.hasOwnProperty.call(this.cartMap, key)) {
                                const entry = this.cartMap[key];
                                entry.forEach(e => {
                                    if(e.isSelect != 1){
                                        this.allChecked = false;
                                        flag = false
                                    }else{
                                        this.selectNum += 1
                                        this.totalPrices += e.price*e.num
                                    }
                                })
                            }
                        }
                        if(flag == true){
                            this.allChecked = true;
                        }
                        console.log(this.cartMap);
                    })
            },
            changeNum(cart){
                this.$http.get("/cart/updateCartNum/"+cart.id+"/"+cart.num)
                    .then(res => {
                        if(res.data.code == 200){
                            this.getUserCartList(this.userId)
                        }
                    })
            },
            deleteById(id){
                this.$confirm('此操作将永久删除商品信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$http.get("/cart/deleteById/"+id)
                        .then(res => {
                            if(res.data.code == 200){
                                this.getUserCartList(this.userId)
                                this.$message.success("删除成功！")
                            }else{
                                this.$message.error("网络异常！删除失败！")
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                });
            },
            isAllSelect(){
                let type = 1
                if(this.allChecked == false){
                    type = 0
                }
                this.$http.get("/cart/allIsSelect/"+this.userId+"/"+type)
                    .then(res => {
                        this.getUserCartList(this.userId)
                    })
            }
        },
        mounted() {
            let loginUser = JSON.parse(localStorage.getItem("loginUser"))
            if (loginUser) {
                this.username = loginUser.username
                $("#noLogin").hide()
                $('#userHeaderInfo').show()
            }
            this.userId = loginUser.id
            this.getUserCartList(this.userId)
        }
    })
</script>
<style scoped>
    .outer{
        width: 1500px;
        margin: 0 auto;
    }
    .outer .cart-tbody {
        margin-bottom: 10px;
    }
    .outer .options-box{
        border: 1px solid rgb(230, 228, 228);
        border-right: none;
        width: 100%;
        height: 50px;
        margin-top: 15px;
    }
    .outer  .options-box .right .text{
        float: right;
        margin-top: 15px;
        margin-right: 28px;
    }
    .outer  .options-box .right .settleM{
        float: right;
        width: 99px;
        height: 50px;
        background: rgb(230, 67, 71);
        line-height:50px;
        text-align: center;
        color: white;
        font-weight: 800;
        font-size: 20px;
        cursor: pointer;
    }
    .outer  .options-box .right{
        float:right;
        height:50px;
        width: 60%;
    }
    .outer  .options-box .left{
        float:left;
        width: 35%;
        line-height: 50px;
        text-align: left;
        margin-top: 15px;
    }
    .outer  .options-box .left span{
        /* margin-left:15px; */
        cursor: pointer;
    }
    .deleteSelectGoods{
        color: #4d4a4a;
    }
    .deleteSelectGoods:hover{
        color: #ed1423;
    }
    .outer .cart-tbody .item-list {
        background: rgb(255, 244, 232);
        padding-top: 10px;
        padding-bottom: 5px;
        display: inline-block;
        width: 100%;
    }
    .outer .cart-tbody .item-list {
        background: rgb(255, 244, 232);
        padding-top: 10px;
        padding-bottom: 5px;
        display: inline-block;
        width: 100%;
    }
    .outer .cart-tbody .item-list .p-checkbox{
        width: 43px;
        float: left;
    }
    .outer .cart-tbody .item-list .p-goods{
        width:470px;
        margin-left: 50px;
        float: left;
    }
    .outer .cart-tbody .item-list .p-img{
        width:120px;
        margin-left: 73px;
        float: left;
    }
    .outer .cart-tbody .item-list .p-price{
        margin-top:20px;
        float:left;
        width:165px;
    }
    .outer .cart-tbody .item-list .p-num{
        margin-top:20px;
        float:left;
        width:50px;
    }
    .outer .cart-tbody .item-list .p-totals-price{
        margin-top:20px;
        float:left;
        width:150px;
        font-size:15px;
        color: #ed0716;
        margin-left: 165px;
    }
    .outer .cart-tbody .item-list .p-oper{
        float:left;
        margin-top:20px;
        cursor: pointer;
        margin-left: 20px;
    }
    .outer .cart-tbody .item-list .p-oper span:hover{
        color: #e1251b;
    }
    .outer .cart-tbody .item-list .p-img img{
        width:80px;
        height:80px;
    }
    .outer .cart-tbody .item-list .p-img .p-msg{
        width:230px;
        float: left;
        margin-top: 10px;
    }
    .outer .cart-tbody .item-list .p-img .p-msg .p-name{
        text-align: left;
        margin-bottom:10px
    }
    .outer .cart-tbody .item-list .p-img .p-msg .p-props{
        text-align: left;
    }
    .outer .cart-tbody .shop {
        height: 30px;
        line-height: 30px;
        padding-left: 11px;
        margin-bottom:2px;
        border-bottom: 2px rgb(170, 170, 170) solid;
    }
    .outer .cart-tbody .shop-txt {
        float: left;
        width: 50%;
        text-align: left;
    }
    .outer .cart-tbody .shop-txt .shop-name {
        cursor: pointer;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        max-width: 260px;
        overflow: hidden;
        vertical-align: middle;
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        font-family: "华文楷体";
        font-weight: 700;
        color: #4d4a4a;
    }
    .outer .cart-tbody .shop-txt.shop-name:hover{
        color: #e50615;
    }
    .outer .cart-thead {
        display: block;
        height: 32px;
        line-height: 32px;
        margin: 0 0 10px;
        padding: 5px 0;
        background: #f3f3f3;
        border: 1px solid #e9e9e9;
        border-top: 0;
        position: relative;
    }
    .outer .cart-thead .column {
        float: left;
    }
    .outer .cart-thead .t-checkbox {
        height: 18px;
        line-height: 18px;
        padding-top: 7px;
        width: 50px;
        padding-left: 11px;
    }
    .outer .cart-thead .t-goods {
        width: 200px;
        margin-left: 135px;
    }
    .outer .cart-thead .t-props {
        width: 100px;
        height: 32px;
        padding: 0 10px 0 20px;
    }
    .outer .cart-thead .t-price {
        width: 90px;
        padding-right: 50px;
        text-align: right;
    }
    .outer .cart-thead .t-quantity {
        width: 240px;
        text-align: center;
    }
    .outer .cart-thead .t-sum {
        width: 90px;
        padding-right: 40px;
        text-align: right;
    }
    .outer .cart-thead .t-action {
        width: 152px;
        margin-left: 87px;
    }
    .outer .cart-checkbox {
        position: relative;
        z-index: 3;
        float: left;
        margin-right: 5px;
    }
    .outer .typeNav {
        border-bottom: 2px solid #e1251b;
    }
    .outer .typeNav .container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        position: relative;
    }
    .outer .typeNav .container .all {
        width: 210px;
        height: 45px;
        background-color: #e1251b;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
    }
    .outer .typeNav .container .nav a{
        height: 45px;
        margin: 0 22px;
        line-height: 45px;
        font-size: 16px;
        color: #333;
    }
    .outer .typeNav .container .sort {
        position: absolute;
        left: 0;
        top: 45px;
        width: 210px;
        height: 461px;
        position: absolute;
        background: #fafafa;
        z-index: 999;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item h3 {
        line-height: 30px;
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        padding: 0 20px;
        margin: 0;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item h3 a {
        color: #333;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list  &:hover .item-list{
         display: block;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list {
        display: none;
        position: absolute;
        width: 734px;
        min-height: 460px;
        _height: 200px;
        background: #f7f7f7;
        left: 210px;
        border: 1px solid #ddd;
        top: 0;
        z-index: 9999 !important;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem {
        float: left;
        width: 650px;
        padding: 0 4px 0 8px;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem dl {
        border-top: 1px solid #eee;
        padding: 6px 0;
        overflow: hidden;
        zoom: 1;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem dl &.fore {
        border-top: 0;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem dl dt {
        float: left;
        width: 54px;
        line-height: 22px;
        text-align: right;
        padding: 3px 6px 0 0;
        font-weight: 700;
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem dl dd {
        float: left;
        width: 415px;
        padding: 3px 0 0;
        overflow: hidden;
        
    }
    .outer .typeNav .container .sort .all-sort-list2 .item .item-list .subitem dl dd em {
        float: left;
        height: 14px;
        line-height: 14px;
        padding: 0 8px;
        margin-top: 5px;
        border-left: 1px solid #ccc;
    }

</style>
</html>